<template>
	<view class="borderTop">
		<block v-for="(item, index) in listDetails">
			<view class="stationList me-fx-row-sb">
				<view class="picPos">
					<image :src="item.user.avatar" mode="" class="head" @click="stationListBtn(item.user.id,item.user.username)"></image>
				</view>
				<view class="stationListRight">
					<view class="headPicBox me-fx-row-start-c">
						<view class="headPicRight">
							<view class="me-fx-row-start-c">
								<view class="headFont">{{item.user.username}}</view>
								<image src="../../static/img/gril.png" mode="" v-if='boyPic' class="sexPic"></image>
								<image src="../../static/img/boy3.png" mode="" v-else class="sexPic"></image>
								<image src="../../static/img/vip.png" mode="" class="vip" v-if="item.vip == '1'"></image>
							</view>
							<view class="time">
								{{item.created_at}}
							</view>
						</view>
					</view>
					<view class="functionBox">
						<block v-if="item.type=='2'">
							<view class="functionList me-fx-row-start-c" v-if="item.publishShow.showMenu.name != ''">
								<image src="../../static/img/newimg/a19.png" mode=""></image>
								<view class="functionFont">
									{{item.publishShow.showMenu.name}}
								</view>
							</view>
							<view class="functionList me-fx-row-start-c" v-if="item.publishShow.appointed_time != ''">
								<image src="../../static/img/newimg/a22.png" mode=""></image>
								<view class="functionFont">
									{{item.publishShow.appointed_time}}
								</view>
							</view>
							<view class="functionList me-fx-row-start-c" v-if="item.publishShow.city !=''">
								<image src="../../static/img/newimg/a20.png" mode=""></image>
								<view class="functionFont">
									{{item.publishShow.city}}
								</view>
							</view>
							<view class="functionList me-fx-row-start-c" v-if="item.publishShow.expectObjTag.name!=''">
								<image src="../../static/img/newimg/a21.png" mode=""></image>
								<view class="functionFont">
									{{item.publishShow.expectObjTag.name}}
								</view>
							</view>
							<view class="picList me-fx-row-start-c">
								<image :src="item2" mode="" v-for="(item2, index) in item.images"></image>
							</view>
						</block>
						<block v-else>
							<view class="nohave" v-if="item.content ==' '">
							</view>
							<view class="functionList me-fx-row-start-c" v-else>
								<!-- <image src="../../static/img/dongtai.png" mode=""></image> -->
								<view class="functionFont">
									{{item.content}}
								</view>
							</view>
							<view class="picList me-fx-row-start-c">
								<image :src="item2" mode="" v-for="(item2, index) in item.images"></image>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="zanNum me-fx-row-sb-c" v-if="item.praise.length > 0">
				<view class="zanLeft me-fx-row-start-c">
					<image src="../../static/img/zan2.png" mode="" class="zanPic"></image>
					<block v-if="item.praise.length < 4">
						<image :src="item3.user.avatar" mode="" class="headPic" v-for="(item3, index) in item.praise" @click="picdetailsBtn(item3.user.id,item.user.username)"></image>
					</block>
				</view>
				<view class="all">
					共<text>{{item.praise_count}}</text>人点赞
				</view>
			</view>
			<view class="applyBox" v-if="item.is_display_join && item.join_list.length > 0">
				<block v-for="(joinListitem, index) in item.join_list">
					<view class="applyNum">
						<text>{{joinListitem.join_count}}</text>人已报名
					</view>
					<view class="applyList me-fx-row-sb-c">
						<view class="applyListRight me-fx-row-start-c">
							<image :src="joinListitem.user.avatar" mode="" class="applyUserPic"></image>
							<view class="applynickName">
								{{joinListitem.user.username}}
							</view>
						</view>
						<view class="applyRight">
							联系他
						</view>
					</view>
				</block>
			</view>
			<view class="commentBox" v-for="(commentItem, index) in item.comment">
				<view class="headPicBox me-fx-row-start-c">
					<image :src="commentItem.user.avatar" mode="" class="dianzanHead"></image>
					<view class="headPicBoxRight">
						<view class="me-fx-row-sb-c">
							<view class="me-text-beyond nicknameWidth">
								{{commentItem.user.username}}
							</view>
							<view class="pinglunTime">
								{{item.created_at}}
							</view>
						</view>
						<view class="me-text-beyond-multi  pinglunCont">
							{{commentItem.content}}
						</view>
					</view>
				</view>
			</view>
			<view class="bottomFiex me-fx-row-sb-c">
				<input type="text" value="" v-model="inputConter" placeholder="说点什么..." />
				<view class="sendBtn" @click="sendBtn">
					发送
				</view>
			</view>
		</block>
		<view class="heightBox">

		</view>
		<!-- 弹窗 -->
		<view class="Covering" v-if="withdrawTK">
			<view class="withdrawTK">
				<image src="../../static/img/f6b8c0d387a54a3aa017c1e17b074df.png" mode=""></image>
				<view class="rink">
					提示
				</view>
				<view class="conter">
					你剩余<text>10</text>次会员特权，是否使用1次 特权查看他的联系方式。
				</view>
				<view class="btnBox me-fx-row-sb-c">
					<view class="cancelBtn" @click="withdrawTK=false">
						取消
					</view>
					<view class="sureBtn" @click="withdrawTK=false">
						确定
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="Covering" v-if="nohaveInfor">
			<view class="withdrawTK">
				<image src="../../static/img/f6b8c0d387a54a3aa017c1e17b074df.png" mode=""></image>
				<view class="rink">
					提示
				</view>
				<view class="conter">
					这个人很懒，没有填写个人介绍~
				</view>
				<view class="btnBox me-fx-row-sb-c">
					<view class="cancelBtn" @click="nohaveInfor=false">
						取消
					</view>
					<view class="sureBtn" @click="nohaveInfor=false">
						发送我的联系方式
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				boyPic: false,
				inputConter: "",
				listDetails: [],
				detailsID: '',
				withdrawTK: false,
				nohaveInfor: false,
			}
		},
		onLoad(options) {
			if (options.id) {
				this.detailsID = options.id
			}
		},
		created() {
			this.indexData();
		},

		methods: {
			sendBtn() {
				this.$u.post('/publish/comment', {
						publish_id: this.detailsID,
						content: this.inputConter
					}).then((res) => {
						if (res) {
							this.indexData();
							this.inputConter = '     '
							uni.showToast({
								title: '评论成功',
								duration: 1000,
								icon: 'none'
							})
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			stationListBtn(id, username) {
				uni.navigateTo({
					url: '../station/headDetails?name=' + username + '&id=' + id
				})
			},
			indexData() {
				this.$u.get('/publish/info', {
						id: this.detailsID
					}).then((res) => {
						if (res) {
							this.listDetails = res.data;
							if (res.data.praise) {
								this.listDetails.praise = res.data.praise.slice(0, 3)
							}
							console.log(res.data.result, '000')
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			picdetailsBtn(id, name) {
				console.log(id, name, 'dddd')
				uni.navigateTo({
					url: '../station/headDetails?name=' + name + '&id=' + id
				})
			}
		}
	}
</script>

<style>
	.borderTop {
		width: 100%;
		height: 100%;
		background-color: #F9F6FF;
		/* margin-bottom: 110rpx; */
	}

	.stationList,
	.commentBox {
		background-color: white;
		padding: 20rpx;
	}

	.borderTop .stationList {
		padding: 20rpx;
		border-bottom: 10rpx solid #F9F6FF;
	}

	.functionBox {
		padding: 16rpx 20rpx;
	}

	.picPos .head {
		width: 84rpx;
		height: 84rpx;
		border-radius: 16rpx;
	}

	.headPicRight {
		margin-left: 20rpx;
	}

	.headPicRight .time {
		font-size: 26rpx;
		color: #AAAAAA;
		margin-top: 10rpx;
	}

	.headPicRight .headFont {
		font-size: 30rpx;
		font-weight: 700;
	}


	.functionList {
		margin: 10rpx 0 0;
	}

	.functionList image {
		width: 30rpx;
		height: 30rpx;
	}

	.functionList .functionFont {
		font-size: 24rpx;
		/* margin-left: 10rpx; */
	}

	.bottomFiex {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: white;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.bottomFiex input {
		height: 80rpx;
		background: rgba(245, 245, 245, 1);
		border-radius: 10rpx;
		width: 60%;
		line-height: 80rpx;
		background-color: #E3E3E3;
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #C0C0C0;
	}

	.zanNum {
		padding: 20rpx;
		background-color: white;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.zanLeft .zanPic {
		width: 30rpx;
		height: 30rpx;
	}

	.zanLeft .headPic {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50rpx;
		margin-left: 10rpx;
	}

	.all {
		color: #aaaaff;
	}

	.sendBtn {
		width: 184rpx;
		height: 80rpx;
		background: rgba(97, 27, 255, 1);
		border-radius: 10rpx;
		text-align: center;
		line-height: 80rpx;
		color: white;
		font-size: 36rpx;
	}

	.comment {
		padding-top: 20rpx;
	}

	.commentBox {
		border-top: 10rpx solid #F9F6FF;
	}

	.headPicRight .sexPic {
		width: 20rpx;
		height: 26rpx;
		margin: 0 10rpx;
	}

	.vip {
		width: 50rpx;
		height: 25rpx;
	}

	.picList {
		padding: 28rpx 0rpx;
		box-sizing: border-box;
	}

	.picList image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}

	.applyBox {
		margin-top: 20rpx;
		padding: 27rpx;
		background-color: white;
	}

	.applyBox .applyNum {
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin: 18rpx 0 10rpx;
	}

	.applyBox .applyList {
		margin-top: 20rpx;
	}

	.applyListRight image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.applyRight {
		font-size: 30rpx;
		color: rgba(92, 20, 255, 1);
	}

	.headPicBox .dianzanHead {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: block;
		margin-right: 20rpx;
	}

	.withdrawTK {
		width: 86%;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		background-color: white;
		margin: 350rpx auto;
		overflow: hidden;
	}

	.withdrawTK image {
		width: 101%;
		height: 172rpx;
	}

	.inputValue {
		height: 38rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(205, 205, 205, 1);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: rgba(85, 85, 85, 1);
		line-height: 98rpx;
		margin: auto;
		margin: 26rpx 48rpx;
		padding: 30rpx;
	}

	.btnBox {
		padding: 48rpx;
		box-sizing: border-box;

	}

	.btnBox .cancelBtn,
	.btnBox .sureBtn {
		width: 228rpx;
		height: 80rpx;
		border: 1rpx solid #824CFE;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.cancelBtn {
		background: rgba(255, 255, 255, 1);
		color: #824CFE;
	}

	.sureBtn {
		background-color: #824CFE;
		color: white;
	}

	.rink {
		font-size: 36rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		text-align: center;
	}

	.conter {
		font-size: 30rpx;
		color: rgba(85, 85, 85, 1);
		line-height: 48rpx;
		padding: 0rpx 50rpx;
	}

	.heightBox {
		width: 100%;
		height: 110rpx;
	}

	.applynickName {
		font-size: 30rpx;
		color: rgba(51, 51, 51, 1);
	}

	.nicknameWidth {
		width: 200rpx;
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.stationListRight {
		width: 100%;
	}

	.headPicBoxRight {
		width: 86%;
	}

	.pinglunTime {
		font-size: 22rpx;
		color: rgba(102, 102, 102, 1);
	}

	.pinglunCont {
		font-size: 28rpx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-top: 12rpx;
	}
</style>
